<template>
    <div class="red-index" v-if="dThirdAuth" id="redIndex" v-cloak>
        <div class="red-nav">
            <div class="nav-left">
                <a @click="toHaoKanHaoWan()" href="javascript:;"><img class="nav-img"
                                                                      :src="staticImageUrl('images/red_nav.png')"
                                                                      alt=""/></a>
            </div>
            <div class="nav-right">
                <a @click="toHaoKanHaoWan()" href="javascript:;" class="scramble-red">抢红包</a>
            </div>
        </div>
        <div class="big-red">
            <div class="top">
                <span class="user-header-wrap"><img class="user-header" :data-userId="pageMsg.userId"
                                                    :src="pageMsg.photo" alt=""/></span>
                <span class="dialog-box">
					<span class="triangle-left"></span>
				<span class="dialog-box-text">{{pageMsg.receiverSpeak}}</span>
				</span>
                <span class="person-number">
					<span class="user-headers" v-for="(value,key) in pageMsg.grabbingPhotos" :key="key" v-if="key < 3">
						<img class="user-header-list" :src="value" alt=""/>
					</span>
				<span class="number-statistics">
						等{{pageMsg.grabbingPeopleNum}}人正在抢红包
					</span>
				</span>
            </div>
            <div class="red-content-wrap">
                <img v-if="pageMsg.showPacketEnd" class="red-end-poke" :src="staticImageUrl('images/red_end.png')"
                     alt=""/>
                <h2 v-if="pageMsg.packetTitle" class="greeting">{{pageMsg.packetTitle}}</h2>
                <div class="red-shadow-wrap">
                    <div class="red-shadow"></div>
                    <img class="shop-logo" :src="pageMsg.storeLogo" alt=""/>
                </div>
                <p class="shop-title" :data-storeId="pageMsg.storeId">{{pageMsg.storeName}}</p>
                <!--用户是否有自己的红包-->
                <div class="red-one-wbtn">
                    <button v-if="!pageMsg.curUserHasPacket" @click="showRedAlert" class="help-btn" href="javascript:;">
                        我也要红包
                    </button>
                    <button v-else @click="showRedAlert" class="help-btn" href="javascript:;">
                        查看我的红包
                    </button>
                </div>
            </div>
        </div>
        <div class="arc-wrap">
            <span class="red-arc"></span>
        </div>
        <div class="title-wrap">
			<span class="left">
				<img :src="staticImageUrl('images/red_title_side.png')" alt=""/>
			</span>
            <span class="red-title">手气榜</span>
            <span class="right">
				<img :src="staticImageUrl('images/red_title_side.png')" alt=""/>
			</span>
        </div>
        <marquee-list-swiper :swiperOptionProps="swiperOption" :rankListProps="rankList"
                             v-if="Object.keys(swiperOption).length > 0"></marquee-list-swiper>
        <!--底部悬浮的下载app的东西-->
        <div class="height50px"></div>
        <bottom-down></bottom-down>
        <get-red-alert
                ref="getRedAlert"
                v-if="isShowAlert && Object.keys(getRedMsg).length > 0"
                :getRedProps="getRedMsg"
                @showRedAlert="showRedAlert"
                @openRedPage="openRedPage"></get-red-alert>
        <!--弹出框-->
        <v-alert v-if="alerts.box" :alert-msg="alerts.msg"></v-alert>
        <v-bord v-if="alerts.box" :activity-name="activityName"></v-bord>
        <!--微信分享-->
        <wx-share-body v-if="Object.assign(share)" :shareBody="share"></wx-share-body>
    </div>
</template>

<script>

    //    import vAlert from './components/Alert';
    //    import bord from './components/BlackBord';
    // import toast from './components/Toast';
    // import WxShareBody from '../../wx/WxShareBody';
    import xurl from '../../x/xurl'
    import XUser from '../../x/XUser'

    export default {
        name: 'UsualPage',
        data() {
            return {
                pageMsg: {},
                rankList: [],
                helpResult: {},
                share: {},
                dThirdAuth: false,
                getRedMsg: {},
                isShowAlert: false,
                welPacketId: 0,
                shareUserId: 0,
                activityName: 'red',
                alerts: {
                    box: false,
                },
                swiperOption: {},
            }
        },
        created() {
            //获取页面信息
            if (XUser.toLogin()) {
                return
            }
            this.welPacketId = this.$route.params.welPacketId;
            this.shareUserId = this.$route.query.shareUserId;
            this.getPageMsg();

        },
        mounted() {
            let that = this;
            document.title = 'red Page';
            this.init();
        },
        methods: {
            init() {
                //获取排行榜
                this.getRank();
            },
            getRedMsgDeal(obj) {
                let temp = {}
                if (obj.curUserHasPacket) {
                    temp.showGetMoneyBtn = true;
                    temp.showGetBtn = false;
                    temp.showShareBtn = false;
                } else {
                    temp.showGetMoneyBtn = false;
                    temp.showGetBtn = true;
                    temp.showShareBtn = false;
                }
                temp.title = obj.packetTitle;
                temp.hasSelfPackage = obj.curUserHasPacket;
                temp.getMoney = obj.curUserReceivedAmount;
                temp.redTypeState = 0;
                this.getRedMsg = Object.assign({}, this.getRedMsg, temp)
            },
            openRedPage() {
                if (!this.userId) {
                    this.$router.push('/to/login');
                    return
                }
                let url = `${this.NW_API_vue}/welfare/packet/${this.welPacketId}/receive`;
                let temp = {};
                this.putLoading(url).then((data) => {
                    if (data.success) {
                        let temp = {};
                        temp.getMoney = data.result;
                        this.$refs.getRedAlert.redShow = false;
                        this.$refs.getRedAlert.isHideRed = true;
                        temp.hasSelfPackage = true;
                        this.getPageMsg()
                        this.getRedMsg = Object.assign({}, this.getRedMsg, temp);
                    } else if (data.errMsg) {
                        this.$root.$emit('toast', {msg: data.errMsg});
                    } else {
                        this.$root.$emit('toast', {msg: '红包领取失败'});
                    }
                });
            },
            showRedAlert(booleanMsg = true) {
                if (!this.userId) {
                    this.$router.push('/to/login');
                    return
                }
                this.isShowAlert = booleanMsg;
                if (booleanMsg) {
                    this.$store.state.loadingImg = true;
                }
                if (this.$refs.getRedAlert) {
                    this.$refs.getRedAlert.redShow = true;
                }
                // if(this.$refs.getRedAlert){
                //     this.$refs.getRedAlert.redShow = booleanMsg;
                // }
            },
            closeAlert() {
                this.alerts.box = false;
                // //重新刷新页面的数据
            },
            callback() {
                console.log("callback")
            },
            /*获取页面基本信息*/
            getPageMsg() {
                let that = this;
                let url = `${this.NW_API_vue}/welfare/direct/packet/${this.welPacketId}/detail?shareUserId=${this.shareUserId} `;
                xurl.get(url).then((data) => {
                    if (data.success) {
                        that.dThirdAuth = this.$store.state.isThirdLogin;
                        this.pageMsg = Object.assign({}, this.pageMsg, data.result);
                        this.getRedMsgDeal(data.result);
                        //修改页面标题
                        document.title = this.pageMsg.packetTitle;
                        //分享
                        this.share = data.result.shareBodyModel;
                        //弹出框信息
                        this.getRedMsgDeal(data.result);
                    } else if (data.errMsg) {
                        this.$root.$emit('toast', {msg: data.errMsg});
                    } else {
                        this.$root.$emit('toast', {msg: '未知错误'});
                    }
                })
            },
            getRank() {
                let url = `${this.NW_API_vue}/welfare/packet/receiver/rank`;
                let that = this;
                xurl.getLoading(url).then((data) => {
                    if (data.success) {
                        this.rankList = data.list.slice(0, 5);
                        let length = this.rankList.length;
                        this.swiperOption = {
                            pagination: {
                                el: '.swiper-pagination',
                            },
                            direction: 'vertical',
                            loop: true,
                            observer: true,
                            observeParents: true,
                            autoplay: 3000,
                            loopedSlides: length,
                            slidesPerGroup: 1,
                            slidesPerView: length > 2 ? 3 : length,
                            lazy: {
                                loadPrevNext: true,
                            },
                        }
                    } else if (data.errMsg) {
                        this.$root.$emit('toast', {msg: data.errMsg});
                    } else {
                        this.$root.$emit('toast', {msg: '未知错误'});
                    }
                })
            },
        },
        /*这里组件可以做懒加载的形式，没时间验证，暂时先不做*/
        /*
        * eg:v-alert:()=>import('./components/Alert');//还可以用commonjs的写法用require页面路由懒加载也可以用这样的方式
        * */
        components: {
            'v-alert': () => import('./components/Alert'),
            'v-bord': () => import('./components/BlackBord'),
            'wx-share-body': () => import('../../components/wx/WxShareBody'),
            'bottom-down': () => import('./components/BottomDown'),
            'get-red-alert': () => import('./components/GetRedAlert'),
            'marquee-list-swiper': () => import('../../components/commonComponents/swiperComponent/SwiperMarquee'),
        }
    }
</script>

<style scoped="scoped" lang="scss">
    @import url($css_root + 'css/swiper.min.css');
    @import url($css_root +'/css/red/red.css');
</style>
